<template>
  <div id="app">
    <!-- 加载进度条 -->
    <nprogress-container></nprogress-container>
    <vue-snotify></vue-snotify>
    <div>
      <ZuiSidebar></ZuiSidebar>
      <!-- transform: none;防止固position:fixed无效 -->
      <sui-sidebar-pushable style="transform: none;">
        <sui-sidebar-pusher :dimmed="sidebar.open">
          <ZuiHeader></ZuiHeader>
          <div
            class="layout layout-has-sider"
            :class="{open:sidebar.open}"
          >
            <div
              class="layout"
              style="min-height: 100vh;"
            >
              <transition
                mode="out-in"
                enter-active-class="fadeIn"
                leave-active-class="fadeOut"
                appear
              >
                <router-view class="animated"></router-view>
              </transition>
              <div
                class="layout-footer"
                style="padding: 0px;"
              >footer</div>
            </div>
          </div>
          <ZuiSearchModal></ZuiSearchModal>
          <ZuiMobileNavigationBar></ZuiMobileNavigationBar>
        </sui-sidebar-pusher>
      </sui-sidebar-pushable>
    </div>
  </div>
</template>
<script>
import NprogressContainer from "vue-nprogress/src/NprogressContainer";
import string from "@/mixins/string";
import indexed from "@/mixins/indexed";
import base64 from "@/mixins/base64";
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import ZuiSidebar from "@/components/ZuiSidebar.vue";
import ZuiHeader from "@/components/ZuiHeader.vue";
import ZuiSearchModal from "@/components/ZuiSearchModal.vue";
import ZuiMobileNavigationBar from "@/components/ZuiMobileNavigationBar.vue";
import { get } from "./plugins/traverson";

export default {
  name: "app",
  mixins: [string, indexed, base64],
  components: {
    ZuiSidebar,
    ZuiHeader,
    ZuiSearchModal,
    ZuiMobileNavigationBar,
    NprogressContainer
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["sidebar", "search", "user", "authentication"])
  },
  mounted() {
    // Assuming this data structure is the response from the API backend.
    this.initMobileMenu();
  },
  methods: {
    ...mapActions(["toggleSidebar", "handleSidebar", "handleSearchModal"]),
    /**
     * Mobile burger menu button and gesture for toggling sidebar
     */
    initMobileMenu() {
      let _self = this;
      let sidebar = document.querySelector(".sidebar");
      let menuButton = document.getElementById("menu-button");
      document.body.addEventListener("click", function(e) {
        if (e.target !== menuButton && !sidebar.contains(e.target)) {
          _self.handleSidebar(false);
        }
      });
      // Toggle sidebar on swipe
      let start = {},
        end = {};
      document.body.addEventListener("touchstart", function(e) {
        start.x = e.changedTouches[0].clientX;
        start.y = e.changedTouches[0].clientY;
      });
      document.body.addEventListener("touchend", function(e) {
        end.y = e.changedTouches[0].clientY;
        end.x = e.changedTouches[0].clientX;
        if (_self.search.modal.open == false) {
          let xDiff = end.x - start.x;
          let yDiff = end.y - start.y;

          if (Math.abs(xDiff) > Math.abs(yDiff)) {
            if (xDiff > 0 && start.x <= 80) _self.handleSidebar(true);
            else _self.handleSidebar(false);
          }
        }
      });
      window.addEventListener(
        "popstate",
        function(e) {
          if (_self.search.modal.open == true) {
            _self.handleSearchModal(false);
          }
        },
        false
      );
    }
  }
};
</script>
<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
@import "~animate.css";
.animated {
  animation-duration: 0.377s;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.layout {
  display: flex;
  flex-direction: column;
  flex: auto;
  background: rgb(255, 255, 255);
  min-height: 0;
}
.layout.layout-has-sider {
  flex-direction: row;
}
.layout-sider {
  transition: all 0.2s;
  position: relative;
  background-color: darkseagreen;
  min-width: 0;
  @media (min-width: @tablet) {
    flex: 0 0 256px;
    max-width: 256px;
    min-width: 256px;
    width: 256px;
  }
}
.layout-footer {
  background: #f0f2f5;
  padding: 24px 50px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}
/deep/ .nprogress-container {
  position: fixed !important;
  width: 100%;
  height: 50px;
  z-index: 2048;
  pointer-events: none;

  #nprogress {
    @color: #48e79a;
    .bar {
      background: @color;
    }
    .peg {
      box-shadow: 0 0 10px @color, 0 0 5px @color;
    }

    .spinner-icon {
      border-top-color: @color;
      border-left-color: @color;
    }
  }
}
</style>
